<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试APP-H5支付</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        html body div ul, li{
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
            font-style: normal;
        }
        html{
            max-width: 640px;
            margin: 0px auto;
            font-size: 100px;
        }

        @media only screen and (max-width: 414px){
            html{
                font-size: 64px;
            }
        }
        @media only screen and (max-width: 375px){
            html{
                font-size: 58px;
            }
        }
        @media only screen and (max-width: 360px){
            html{
                font-size: 56px;
            }
        }
        @media only screen and (max-width: 320px){
            html{
                font-size: 50px;
            }
        }
        ul, li{
            list-style: none;
        }
        .qiandaobanner {
            position: relative;
            text-align: center;
        }
        .qiandaobanner img {
            min-width: 320px;
            width: 100%;
        }
        .cardexplain {
            min-width: 301px;
            margin: 11px 10px 20px 9px;
        }
        .round{
            border: 1px solid #c6c6c6;
            text-align: left;
            line-height: 24px;
            display: block;
            font-size: 14px;
        }
        .round .dandanb {
            border-color: #ebebeb;
            padding:0 10px;
        }
        .round LI SPAN.none{
            padding: 10px 20px 9px 0;
            min-height: 22px;
            display: block;
            font-size: 16px;
        }
        .round LI .none img{
            margin: 0 10px 0 0;
            width: 50px;
            height: 50px;
        }
        .round LI .none .h4{
            line-height: 24px;
            display: inline-block;
            padding-bottom: 15px;
        }
        .round title{
            background-color: #e1e1e1;
        }
        .round LI.title SPAN{
            color: #666;
            font-size: 18px;
            text-shadow: 0 1px #fff;
            padding: 5px 15px 4px 0;
        }
        .round LI.nob{
            width: 100%;
            border:0px;
        }
        .beizhu{
            width: 90%;
            border: 1px solid #ede17e;
            text-align: center;
            line-height: 22px;
            background-color: #fff5c5;
            color: #bca24b;
            font-size: 14px;
            margin: 11px auto 8px;
            padding: 4px 10px 5px 10px;
        }
        .nob .th{
            display: inline-block;
            box-sizing: border-box;
            text-align: left;
            padding-left: 5px;
            width: 30%;
            color: #333333;
            font-size: 16px;
        }
        .nob .td{
            display: inline-block;
            width: 59%;
            color: #999999;
            text-align: left;
        }
        .round LI.nob .px{
            border: 1px solid #e8e8e8;
            padding: 5px 10px;
            background-color: #fff;
            margin: 5px 0 4px;
            overflow: hidden;
        }


        .thtop{
            vertical-align: top;
            padding-top: 10px;
        }
        .round LI.nob .pxtextarea{
            border: 1px solid #e8e8e8;
            padding: 5px 10px;
            margin: 5px 0;
        }
        .t_select{
            overflow: hidden;
            width: 90%;
            height: 35px;
            margin-top: 2px;
            border:none;
        }
        select{
            padding-left: 5px;
        }
        .footReturn{
            margin: 11px auto;
            width: 88%;
        }
        .submit{
            width: 90%;
            display: inline-block;
            border: 1px solid #0b8e00;
            text-align: center;
            background-color: #179f00;
            padding: 10px 20px;
            font-size: 16px;
            color: #ffffff;
        }
    </style>

<body>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<button id="J_btn" class="btn btn-default">支付1</button>
<script>
    var orderstr="alipay_sdk=alipay-sdk-java-3.0.118.DEV&app_id=2018112803019836&biz_content=%7B%22amount%22%3A%220.02%22%2C%22extra_param%22%3A%22%7B%5C%22category%5C%22%3A%5C%22CHARGE_PILE_CAR%5C%22%7D%22%2C%22order_title%22%3A%22%D6%A7%B8%B6%B1%A6%D4%A4%CA%DA%C8%A8%22%2C%22out_order_no%22%3A%22ZMOutOrderNoAppFreeze2018052915543415090975%22%2C%22out_request_no%22%3A%22ZMOutReqNoAppFreeze20180529155434581875858%22%2C%22pay_timeout%22%3A%222d%22%2C%22payee_user_id%22%3A%222088202224929664%22%2C%22product_code%22%3A%22PRE_AUTH_ONLINE%22%7D&charset=GBK&format=json&method=alipay.fund.auth.order.app.freeze&sign=L4wk%2FNKcbJOo3n6Q5qbPzn0jUsvZlK4jr7iXnghudR0zeWJMmeNC71qIBSQfIz45n%2B5iTd0NQ5IK581xI2xCShTCiKAywnQcDmA%2Bjf%2BrRdKCDQCMLfCz%2BZ37C%2B6zxAX3e81%2F8Hr29lw4VPFfHkp9FmMwKw%2FGkNfV5ZlWoh7UtN8%3D&sign_type=RSA&timestamp=2018-05-29+15%3A54%3A35&version=1.0";
    var btn = document.querySelector('#J_btn');
    btn.addEventListener('click', function(){
        ap.tradePay({
            orderStr: orderstr
        }, function(res){
            ap.alert(res.resultCode);
        });
    });
</script>


</body>
</html>